<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="pageQueryBoxArea mb10">
				<el-form :model="state.param" :inline="true">
					<el-form-item label="门店类型：">
						<el-select v-model="state.param.source" placeholder="请选择门店类型">
							<el-option v-for="item in state.query.storeType" :key="item.value"
								:label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				
					<el-form-item label="门店状态：">
						<el-select v-model="state.param.storeStatus" placeholder="请选择门店状态">
							<el-option v-for="item in state.query.storeStatus" :key="item.value"
								:label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				
					<el-form-item label="选择门店：">
						<el-select v-model="state.param.nodeId" placeholder="请选择门店">
							<el-option v-for="item in state.query.storeList" :key="item.id" :label="item.name"
								:value="item.id" />
						</el-select>
					</el-form-item>
				
					<el-form-item label="统计分类：">
						<el-select v-model="state.param.statistics" placeholder="请选择统计分类">
							<el-option v-for="item in state.query.staticticsCategory" :key="item.value"
								:label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				
					<el-form-item label="卡项类型：">
						<el-select v-model="state.param.cardType" placeholder="请选择卡项类型">
							<el-option v-for="item in state.query.cardType" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
				
					<el-form-item label="卡项名称：">
						<el-input v-model="state.param.keyword" placeholder="请输入卡项名称" clearable></el-input>
					</el-form-item>
					<el-form-item label="选择日期：">
						<el-date-picker v-model="state.param.dateTime" type="daterange" unlink-panels :shortcuts="shortcuts"
							format="YYYY/MM/DD" value-format="YYYY-MM-DD" range-separator="-" :disabled-date="disabledDate"
							start-placeholder="开始日期" end-placeholder="结束日期" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Search />
							</el-icon> 搜 索
						</el-button>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Refresh />
							</el-icon> 重 置
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card shadow="hover" v-loading="state.loading" style="display: flex;flex-direction: column;flex: 1;height: inherit;">
				<section style="flex: 1;display: flex;flex-direction: column; flex: 1;height: inherit;">
					<el-table :data="state.tableData" v-loading="state.loading">
						<el-table-column label="ID" v-if="state.param.statistics == 1" width="90"  prop="id" />
						<el-table-column label="名称" prop="cardItemName" />
						<el-table-column label="属性" prop="property" />
						<el-table-column label="规格" prop="spec" />
						<el-table-column sortable label="零售价">
							<template #default="scope">
								<span>例：99.87</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="实售价">
							<template #default="scope">
								<span>例：99.87</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="销量">
							<template #default="scope">
								<span>例：99.87</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="销售额" prop="price" v-if="state.param.statistics === 4" />
						<el-table-column sortable label="销量">
							<template #default="scope">
								<span>例：99.87</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="销售比">
							<template #default="scope">
								<span>例：99.87</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="未消耗金额">
							<template #default="scope">
								<span>例：99.87</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="未消耗比">
							<template #default="scope">
								<span>例：99.87</span>
							</template>
						</el-table-column>
						<!-- <el-table-column  v-if="state.param.statistics === 4" prop="repurchaseCycle">
							<template #header>
								<section style="display: flex; align-items: center;">
									<span>复购周期</span>
									<el-tooltip  effect="dark" content="复购周期 = 复购周期平均值之和 / 复购总人数"  style=""
										placement="right-start" >
										<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
									</el-tooltip> 
								</section> 
							</template>
						</el-table-column>
						<el-table-column label="服务量" prop="serviceCount" v-if="state.param.statistics === 3" />
						<el-table-column label="消耗业绩" prop="consume" v-if="state.param.statistics === 3" />
						<el-table-column v-if="state.param.statistics === 3" prop="averageMonth" >
							<template #header>
								<section style="display: flex; align-items: center;">
									<span>人均月消耗次数</span>
									<el-tooltip  effect="dark" content="人均月消耗次数 = 服务量 / 普及人数"  style=""
										placement="right-start" >
										<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
									</el-tooltip> 
								</section> 
							</template>
						</el-table-column>
						<el-table-column v-if="state.param.statistics === 3" prop="averagePeple">
							<template #header>
								<section style="display: flex; align-items: center;">
									<span>人均消耗业绩</span>
									<el-tooltip  effect="dark" content="人均消耗业绩 = 消耗业绩 / 总服务人数"  style=""
										placement="right-start" >
										<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
									</el-tooltip> 
								</section> 
							</template>
						</el-table-column>
						<el-table-column label="销量" prop="salesVolume" v-if="state.param.statistics === 1 || state.param.statistics === 2" />
						<el-table-column label="普及人数" prop="popularizePeple" v-if="state.param.statistics === 2" />
						<el-table-column v-if="state.param.statistics === 2" prop="popularizeRatio">
							<template #header>
								<section style="display: flex; align-items: center;">
									<span>普及率</span>
									<el-tooltip  effect="dark" content="普及率 = 普及人数 / 权限内总会员人数"  style=""
										placement="right-start" >
										<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
									</el-tooltip>
									
								</section> 
							</template>
						</el-table-column>
						<el-table-column label="持有(现在)人数" prop="holdPeple" v-if="state.param.statistics === 2" />
						<el-table-column v-if="state.param.statistics === 2" prop="holdRatio">
							<template #header>
								<section style="display: flex; align-items: center;">
									<span>持有(现在)率</span>
									<el-tooltip  effect="dark" content="持有(现在)率 = 持有人数 / 权限内总会员人数"  style=""
										placement="right-start" >
										<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
									</el-tooltip>
									
								</section> 
							</template>
						</el-table-column>
						<el-table-column label="流失人数" prop="lossPeple" v-if="state.param.statistics === 2" />
						<el-table-column v-if="state.param.statistics === 2" prop="lossRatio">
							<template #header>
								<section style="display: flex; align-items: center;">
									<span>流失率</span>
									<el-tooltip  effect="dark" content="流失率 = 流失人数 / 普及人数"  style=""
										placement="right-start" >
										<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
									</el-tooltip>
									
								</section> 
							</template>
						</el-table-column>
						<el-table-column label="销售金额" prop="cellPrice" v-if="state.param.statistics === 1" />
						<el-table-column prop="cellRatio" v-if="state.param.statistics === 1 || state.param.statistics === 4">
							<template #header>
								<section style="display: flex; align-items: center;">
									<span>销售占比</span>
									<el-tooltip  effect="dark" content="销售占比 = 该卡项销售金额之和 / 所有卡项销售金额之和"  style=""
										placement="right-start" >
										<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
									</el-tooltip>
									
								</section> 
							</template>
						</el-table-column>
						<el-table-column label="未消耗金额" prop="notUsedPrice" v-if="state.param.statistics === 1" />
						<el-table-column prop="notUsedRatio" v-if="state.param.statistics === 1 || state.param.statistics === 4">
							<template #header>
								<section style="display: flex; align-items: center;">
									<span>未消耗占比</span>
									<el-tooltip effect="dark" content="未消耗占比 = 该卡项未消耗金额之和 / 该卡项销售金额之和" 
										placement="left-start" >
										<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
									</el-tooltip>
									
								</section> 
							</template>
						</el-table-column>
						<el-table-column label="服务好评率" prop="serviceGoodRatio" v-if="state.param.statistics === 4" />
						<el-table-column label="客群年龄" prop="age" v-if="state.param.statistics === 4" />
						<el-table-column label="男女比例" prop="sexRatio" v-if="state.param.statistics === 4" /> -->
						<el-table-column  label="操作">
							<template #default="scope">
								<el-button text type="primary" @click="previewInfo(scope.row.id)">
									详情
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-row justify="end">
						<el-col :span="24" class="flex-end-center">
							<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange"
								class="mt15" :pager-count="5" :page-sizes="[10, 20, 30,50,100,500,1000]"
								v-model:current-page="state.param.pageNum" background v-model:page-size="state.param.pageSize"
								layout="total, sizes, prev, pager, next, jumper" :total="state.total">
							</el-pagination>
						</el-col>
					</el-row>
				</section>
			</el-card>
		</div>
		<CardDialog v-model="cardDialogVisble" :statistics="state.param.statistics" :id="state.param.rowId" />
	</div>
</template>

<script setup lang="ts" name="funCountup">
import {  onMounted, reactive, ref, defineAsyncComponent } from 'vue';
import CardDialog from '/@/views/analysis/card/components/CardDialog.vue' 
import type { storeNodeListData, channelListData } from "/@/types/order";
import { storeNodeList } from '/@/api/order';
const state = reactive({
	param: {
		type: 4,
		source: 0, // 0 门店 2 线上 //设置不了得值是哪个？
		mode: null, // 门店类型  null(默认) 全部 0 直营  1 加盟
		storeStatus:-1,
		nodeId: null, // 门店id
		// 销售渠道
		channel: null,
		status: null,
		cardType:-1,
		// 支付方式
		dateTime: [],
		startTime: "",
		endTime: "",
		timeInterval: 3,
		total: 0,
		keyword: "",
		pageNum: 1,
		pageSize: 10,
		change: 999,
		storeType: null as null | number,
		statistics: 1,
		rowId: -1
	},
	query: {
		orderSource: [
			{ value: 0, label: '门店订单' },
		],
		storeType: [
			{ value: null, label: '全部' },
			{ value: 0, label: '直营' },
			{ value: 1, label: '加盟' }
		],
		storeStatus:[
			{ value: -1, label: '全部' },
			{ value: 1, label: '正常' },
			{ value: 2, label: '闭店' },
			{ value: 3, label: '休息' }
		],
		staticticsCategory: [
			{ value: 1, label: '卡项销售' },
			{ value: 2, label: '卡项普及' },
			{ value: 3, label: '卡项消耗' },
			{ value: 4, label: '大数据画像' },
		],
		cardType: [
			{ value: -1, label: '全部' },
			{ value: 0, label: '疗程卡' },
			{ value: 1, label: '单次卡' },
			{ value: 2, label: '体验卡' },
		],
		storeList: [] as Array<storeNodeListData>,
		orderStatus: [
			{ value: null, label: '全部' },
			{ value: 4, label: '已服务' },
			{ value: 14, label: '已撤销' },
		],
		saleChannel: [] as Array<channelListData>,
		orderType:[
			{ value: 999, label: '全部订单' },
			{ value: 1, label: '换卡服务' },
			{ value: 2, label: '余卡服务' },
		]
	},
	loading: false,
	total: 0,
	tableData: [
		{
			id: 1,
			cardItemName: '测试',
			property: '属性名称',
			spec: '规格',
			salesVolume: '销量',
			cellPrice: '销售价格',
			cellRatio: '销售占比',
			notUsedPrice: '未消耗金额',
			notUsedRatio: '未消耗占比',
			popularizePeple: '普及人数',
			popularizeRatio: '普及率',
			holdPeple: '持有人数',
			holdRatio: '持有率',
			lossPeple: '流失人数',
			lossRatio: '流失率',
			serviceCount: '服务量',
			consume: '消耗业绩',
			averageMonth: '月平均',
			averagePeple: '人平均',
			price: '客单价',
			repurchaseCycle: '复购周期',
			serviceGoodRatio: '服务好评率',
			sexRatio: '男女比例',
			age: '年龄'
		}
	] as Array<any>
		
});

const disabledDate= (time: Date) => time.getTime() > Date .now();

const shortcuts = [
	{
		text: '本月',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.setDate(1))
		return [start, end]
		},
	},
	{
		text: '近一个月',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
		return [start, end]
		},
	},
	{
		text: '近三个月',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
		return [start, end]
		},
	},
	{
		text: '近半年',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
		return [start, end]
		},
	},
	{
		text: '近一年',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
		return [start, end]
		},
	},
]

/**
 * 获取门店列表
 * mode  null /全部   0直营  1加盟
 */
 const getStoreNodeList = async () => {
	const { results } = await storeNodeList({ mode: null, current: 1, size: 50 });
	let no1 = [{id:null,name:'全部'}]
	state.query.storeList = [...no1, ...results.records];
}



const cardDialogVisble = ref(false)
const defaultTime2: [Date, Date] = [
  new Date(2000, 1, 1, 12, 0, 0),
  new Date(2000, 2, 1, 8, 0, 0),
]

const search = () => {}

const handleSizeChange = () => {}
const handleCurrentChange = () => {}
const previewInfo = (id: number) => {
	state.param.rowId = id
	cardDialogVisble.value = true
}
// 页面加载时
onMounted(() => {
	getStoreNodeList()
});
</script>

<style scoped lang="scss">
:deep(.el-card__body){
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-table{
		flex: 1;
		.el-table__inner-wrapper::before{
			background: none !important;
		}
	}
}

</style>
